<template>
    <div class="mainCenter">
        <div class="title">用户管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="姓名/电话/账号" v-model="keyWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getSearch"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="danger" @click="deleteUserMore"><el-icon>
                            <Delete />
                    </el-icon>批量操作({{uids.length}})</el-button>
                    <el-button type="primary" @click="goToUserDetail(null)"><el-icon>
                            <Plus />
                        </el-icon>添加用户</el-button>
                </div>
            </div>
            <el-table :data="userList" style="width: 100%" stripe border @selection-change="getMore">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="uid" label="用户编号" width="150" />
                <el-table-column prop="relname" label="用户姓名" width="150">
                    <template  #default="scope"> 
                        <span>{{ scope.row.relname?scope.row.relname:'<未填写>'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户昵称" width="150"/>
                <el-table-column prop="phonenumber" label="用户手机号" width="150"/>
                <el-table-column prop="mail" label="用户邮箱" />
                <el-table-column label="用户状态" prop="state" width="100">
                    <template #default="scope:any">
                        <p :style="{color:scope.row.state?'green':'red'}"><span :class="'point '+(scope.row.state?'green':'red')"></span>{{ scope.row.state?'正常':'禁用' }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope:any">
                        <el-button type="primary" plain size="small" @click="goToUserDetail(scope.row.uid)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="primary" plain size="small" @click="goToUserAll(scope.row.uid)"><el-icon>
                                <More />
                            </el-icon>详情</el-button>
                        <el-button type="danger" plain size="small" @click="deleteUser(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10, 20, 40]" :total="count"
                style="float: right;margin-top: 20px;" @current-change="jumpPage" @size-change="getlimit" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqDeleteUserMore, reqDeleteUserOne, reqGetUserList, reqSearchUserCommon } from '@/api/common';
import { userAllInfoType } from '@/types/reader';
import { User } from '@/types/user';
import { elementConfirm, tip } from '@/utils/alert';
import { number } from 'echarts';
import { pa } from 'element-plus/es/locale';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
const nums=ref<number>(0)
const userList = ref<Array<User>>([])
const page = ref<number>(1)
const count = ref<number>(0)
const uids=ref<Array<string>>([])
const keyWord=ref<string>('')
const isSearch=ref<boolean>(false)
const jumpPage = (num: number) => {
    page.value = num
    if(isSearch.value==false){
        getUserList(page.value, limit.value)
    }
}

const getMore=(selection:User[])=>{
    nums.value=selection.length
    let arr:string[]=[]
    selection.forEach((item:User)=> {
        arr.push(item.uid as string)
    });
    uids.value=arr
}
const limit = ref<number>(10)
const getlimit = (value: number) => {
    limit.value = value
    if(isSearch.value==false){
        getUserList(page.value, limit.value)
    }
    
}
const getUserList = (page: number, limit: number) => {
    reqGetUserList(page, limit).then(res => {
        count.value = res.data.data.count
        userList.value = res.data.data.data
    })
}

const getSearch=()=>{
    isSearch.value=true
    page.value=1
    search(page.value,limit.value)
}

const search=(page:number,limit:number)=>{
    reqSearchUserCommon(keyWord.value,limit,page).then(res=>{
        userList.value=res.data.data.data
    })
}

const goToUserAll=(uid:string)=>{
    router.push({
        path:'/users/readerDetail',
        query:{
            uid
        }
    })
}
const goToUserDetail=(uid:string|null)=>{
    router.push({
        path:'/users/userDetail',
        query:{
            uid
        }
    })
}
const deleteUser=(idx:number,info:User)=>{
    elementConfirm().then(()=>{
        reqDeleteUserOne(info).then(res=>{
            tip(res.data.info,"success")
            history.go(0)
        })
    })
}

const deleteUserMore=()=>{
    elementConfirm().then(()=>{
        reqDeleteUserMore(uids.value).then(res=>{   
            count.value=count.value-uids.value.length
        })
    })
}


onMounted(() => {
    getUserList(page.value, limit.value)
})
</script>

<style scoped lang="scss">
    p  {
    display: flex;
    align-items: center;
    .point {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
}
</style>